<template>
    <div class="backTop" v-show="scrollType" @click.stop="backTop">
        <van-icon name="arrow-up" color="#fff" />
    </div>
    <div class="cs"></div>
</template>

<script >
import { reactive, toRefs, onBeforeUnmount, onMounted } from 'vue'
export default {
    name: 'BackTop',
    setup() {
        const state = reactive({
            scrollType: false, // 控制按钮显示和隐藏
            timerId: null,
            scrollTop: 0
        })
        function backTop() {
            state.timerId = setInterval(() => {
                // 给返回增加动画效果
                const upSpeed = Math.floor(-state.scrollTop / 5)
                document.documentElement.scrollTop = state.scrollTop + upSpeed
                if (state.scrollTop === 0) {
                    clearInterval(state.timerId)
                }
            }, 30)
        }
        function handleScoll(ev) {
            // 当滚动的距离大于700 时出现该按钮
            state.scrollTop = window.pageYOffset
            if (window.pageYOffset / 100 > 5) {
                state.scrollType = true
            } else {
                state.scrollType = false
            }
        }
        onBeforeUnmount(() => {
            window.removeEventListener('scroll', handleScoll)
            clearInterval(state.timerId)
        })
        onMounted(() => {
            window.addEventListener('scroll', handleScoll)
        })
        return {
            ...toRefs(state),
            backTop
        }
    }
}
</script>

<style>
.backTop {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: fixed;
    bottom: 60px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    z-index: 999;
}
</style>
